<template>
  <div class="left-center-box">
    <group-card :title="title">
      <div class="left-center-box-inner">
        <!-- 图表区域 -->
        <div class="my-chart" ref="myChartRef"></div>
      </div>
    </group-card>
  </div>
</template>

<script setup>
import * as echarts from "echarts";

const props = defineProps({
  echartsData: {
    type: Array,
    default: () => []
  },
  title: String
});
const hourTimes = []
for (let i = 0; i < 24; i++) {
  hourTimes.push(i+ ':00')
}

const myChartRef = ref(null);
// data
const state = reactive({
  // echarts 配置
  chart: null,
  echartsOptions: {
    tooltip: {
      type: "scroll",
      trigger: "axis",
      scrollDataIndex: 5,
      backgroundColor: "#000000",
      position: ["40%", "0%"],
      textStyle: {
        color: "#fff",
        height: 14,
        lineHeight: 20
      }
    },
    grid: {
      top: "10%",
      left: "10%",
      right: "4%",
      bottom: "12%",
      zIndex: 2,
    },
    // xAxis: {
    //   // type: 'value',
    //   axisLabel: {
    //     textStyle: {
    //       color: '#fff',
    //     },
    //   },
    //   axisLine: { 
    //     lineStyle: {
    //       type: 'dashed'
    //     }
    //   },
    //   data: hourTimes
    // },
    yAxis: {
      type: 'value',
      // type: 'category',
      axisLine: { onZero: false },
      axisLabel: {
        textStyle: {
          color: '#fff',
        },
      },
      axisLine: { 
        formatter: '{value} 人',
        lineStyle: {
          type: 'dashed'
        }
      },
      // axisLabel: {
      //   formatter: '{value} 人'
      // },
      boundaryGap: false,
      data: []
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: hourTimes,
      minInterval: 1,
      interval: 0,
      axisLabel: {
        textStyle: {
          color: '#fff',
        },
      },
    },
    // yAxis: {
    //   type: "value",
    //   name: "(人)",
    //   nameLocation:"end",
    //   // data: [0, 2000, 4000, 6000],
    //   splitNumber: "4",
    //   min: "0",
    //   minInterval: 1,
    //   max: "6000",
    // },
    series: [{
      type: 'line',
      symbolSize: 10,
      symbol: 'circle',
      smooth: true,
      lineStyle: {
        width: 3,
        shadowColor: 'rgba(0,0,0,0.3)',
        shadowBlur: 10,
        shadowOffsetY: 8
      },
      data: []
    }],
  },
});
const { chart, echartsOptions } = toRefs(state);

watch(
  () => props.echartsData,
  () => {
    updateChart();
  }
);
//methods
const updateData = () => {
  state.echartsOptions.yAxis.data = props.echartsData.map(item => item.name)
  state.echartsOptions.series =  props.echartsData.map(item => {
    console.log(item)
      return {
        name: item.name,
        type: 'line',
        symbolSize: 10,
        symbol: 'circle',
        smooth: true,
        lineStyle: {
          width: 3,
          shadowColor: 'rgba(0,0,0,0.3)',
          shadowBlur: 10,
          shadowOffsetY: 8
        },
        data: item.counts
      }
  })
  // state.echartsOptions.series[0].data = props.echartsData.map(item => {
  //   return item.count
  // })
};
// 初始化图表
const initEcharts = () => {
  updateData();
  chart.value = shallowRef(echarts.init(myChartRef.value));
  const initOptions = echartsOptions.value;
  chart.value.setOption(initOptions);
};
const updateChart = () => {
  updateData();
  const updateOptions = echartsOptions.value;
  chart.value.setOption(updateOptions);
};


// 屏幕适配
const screenAdaperPh = () => {
  chart.value.setOption(echartsOptions.value);
  nextTick(() => {
    chart.value.resize();
  });
};
onMounted(() => {
  initEcharts();
  window.addEventListener("resize", screenAdaperPh);
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", screenAdaperPh);
});

defineExpose({
  // updateChart,
});
</script>

<style lang="scss" scoped>
.left-center-box {
  // height: 226px;
  height: 270px;
  // background-color: #979494;

  margin-top: 30px;
  display: flex;
  flex-direction: column;
  .left-center-box-inner {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 15px 20px;

    .my-chart {
      height: 180px;
    }
  }
}
</style>
